<style lang="less">
  .new-and-second-wrapper {
    background: #000 url("~@/assets/home/trend.png") center center no-repeat;
    padding: 2em 0 0 0;

    .new-and-second {
      width: 1190px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      .echart {
        height: 335px;
        flex: 1 1 0;
      }
      canvas {
        border: solid 1px red;
      }
      .pk {
        font-family: -webkit-pictograph;
        font-size: 270%;
        width: 270px;
        text-align: center;
        color: #e03b01;
        font-weight: normal;
      }
      p {
        font-size: 19px;
        color: #ca542b;
        margin-top: 10px;
      }
    }

  }
</style>

<template>
  <div class="new-and-second-wrapper">
    <div class="new-and-second">
      <div class="echart" ref="newHouse">

      </div>
      <div class="pk">
        <h2>PK</h2>
        <p>二手房与新房楼市走势图</p>
      </div>
      <div class="echart" ref="second">

      </div>
    </div>
  </div>
</template>


<script>

  import api from '@/service/api'

  export default {
    data () {
      return {}
    },
    mounted () {
      var option = {
        title: [{
          text: '单位: 元/平',
          top: '26',
          right: '0%',
          textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: 12
          }
        },
          {
            text: '新房楼市房价走势图',
            bottom: '0',
            left: 'center',
            textStyle: {
              color: '#aaa',
              fontWeight: 'normal',
              fontSize: 16
            }
          }],
        tooltip: {
          trigger: 'axis',
          color: '#fff',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter (data) {
            return `${data[0].name}年<br>价格:${data[0].value}元`
          }
        },
        color: ['#275fd7'],
        grid: {
          left: '0%',
          right: '0%',
          top: '20%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: '价格曲线',
            type: 'line',
            lineStyle: {
              normal: {
                width: 2,
                color: 'yellow'
              }
            },
            smooth: true,
            data: []
          },
          {
            name: '',
            type: 'bar',
            barWidth: '20%',
            data: []
          }
        ]
      }

      var newHouseChart = echarts.init(this.$refs.newHouse)
      var secondChart = echarts.init(this.$refs.second)

      api.trendPic().then((res) => {
        var newTrend = res.data.newTrend.reverse()
        var newTrendOption = _.cloneDeep(option)

        // 第一个图表
        newTrend.forEach((item) => {
          newTrendOption.xAxis[0].data.push(item.levelInfo)
          var data = item.verticalInfo
          newTrendOption.series[0].data.push(data)
          newTrendOption.series[1].data.push(data)
        })
        newHouseChart.setOption(newTrendOption)

        // 第二个图表
        var twoTrend = res.data.twoTrend.reverse()
        var secondTrendOption = _.cloneDeep(option)
        secondTrendOption.title[1].text = '二手房楼市房价走势图'
        twoTrend.forEach((item) => {
          secondTrendOption.xAxis[0].data.push(item.levelInfo)
          var data = item.verticalInfo
          secondTrendOption.series[0].data.push(data)
          secondTrendOption.series[1].data.push(data)
        })
        secondChart.setOption(secondTrendOption)
      })
    }
  }
</script>

